<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ include file="/view/common/init.jsp"%>
<title>Cập nhật user</title>
<script type="text/javascript">
var curValue = undefined;
function loadGroups(){
	curValue = $('groupCombo').value; 
	$('groupCombo').disabled="disabled";
	new Ajax.Request(base_url + 'group/listJson.do', {
		method : 'post',
		onSuccess : function(transport) {
			var data = transport.responseText.evalJSON();
			// Init Countries combo
			pushValueToGroupCombo(data.groups);
		},
		onFailure : function() {
			alert('Something went wrong...');
		}
	});
}
function pushValueToGroupCombo(data){
	$('groupCombo').options.length = 1;
	for(var i=data.length-1; i>=0; i--){
	    var option = document.createElement('option');
	    option.text = data[i].groupName;
	    option.value = data[i].groupId;
	    if (option.value==curValue) {
	    	option.selected = true;
	    }	    
	    var optionOld = $('groupCombo').options[$('groupCombo').selectedIndex + 1];  
	    try {
	    	$('groupCombo').add(option, optionOld); // standards compliant; doesn't work in IE
	    }
	    catch(ex) {
	    	$('groupCombo').add(option, $('groupCombo').selectedIndex + 1); // IE only
	    }
	}
	$('groupCombo').disabled=null;
}
function checkPass(){
	if ($('password').value != $('passwordConfirm').value){
		alert('Mật khẩu không trùng!');
		$('password').focus();
		$('password').select();
	} 
}
function submitEditUserForm(){
	if (!check('user.userName', 'Username', null, 40)){
		return false;
	}
	if (!check('password', 'Password')){
		return false;
	}	
	if ($('groupCombo').value == '0'){
		alert('Bạn phải chọn group');
		return false;
	} 
	if ($('password').value != $('passwordConfirm').value){
		alert('Mật khẩu không trùng!');
		$('password').focus();
		$('password').select();
		return false;
	}

	if (!check('user.fullName', 'Tên đầy đủ', null, 80)){return false;}
	if (!check('user.mobile', 'Số di động', null, 20)){return false;}
	if (!check('user.email', 'Email', null, 80)){return false;}
	if (!check('user.description', 'Thông tin khác', null, 200)){return false;}

	if ($('user.userName').value != $('user.userNameOld').value) {
		new Ajax.Request(base_url + 'user/nameIsUsed.do?user.userName=' + $('user.userName').value, {
			method : 'post',
			onSuccess : function(transport) {
				var data = transport.responseText.evalJSON();
				// Init Countries combo
				if (data.nameIsUsed=='false'){
					$('editUserForm').submit(); 	
				} else {
					alert('Tên user đã tồn tại! Hãy chọn lại');
					setTimeout(function(){$('user.userName').focus();}, 10);		
				}
			},
			onFailure : function() {
				alert('Something went wrong...');
			}
		});
	} else {
		$('editUserForm').submit();
	} 	
}
</script>
<center>
<div class="header">CẬP NHẬT USER</div>
<div style="width: 980px;">
<s:form action="editComplete.do" id="editUserForm">
<input type="hidden" value="<c:out value="${user.userId}"/>" name="user.userId"></input>
<input type="hidden" value="<c:out value="${user.userName}"/>" id="user.userNameOld"></input>
<table class="tbl_info" border="0" width="613">
	<tbody>
		<tr>
			<td class="hed" colspan="2" />CẬP NHẬT USER</td>
		</tr>
		<tr><td>Username<span class="error">&nbsp;*</span></td><td>
			<s:textfield name="user.userName" 
				cssClass="require" id="user.userName" 
				/>				
		</td></tr>
		<tr><td>Password<span class="error">&nbsp;*</span></td><td><input type="password" name="user.password" class="require" id="password" value="${user.password}"/></td></tr>
		<tr><td>Xác thực mật khẩu<span class="error">&nbsp;*</span></td><td><input type="password" value="${user.password}"  id="passwordConfirm" onblur="checkPass();"/></td></tr>
		<tr><td>Tên đầy đủ</td><td><s:textfield name="user.fullName" id="user.fullName"/></td></tr>
		<tr><td>Số di động</td><td><s:textfield name="user.mobile" id="user.mobile" /></td></tr>
		<tr><td>Email</td><td><s:textfield name="user.email" id="user.email" /></td></tr>
		<tr><td>Thông tin khác</td><td><s:textfield name="user.description" id="user.description" /></td></tr>
		<tr><td>Nhận báo cáo ngày</td><td>
			<input type="radio" name="user.dailyReport" value="1"
				<c:if test="${user.dailyReport == '1' }">  
					checked="checked"
				</c:if>
			> Có
			<input type="radio" name="user.dailyReport" value="0"
				<c:if test="${user.dailyReport == '0' }">  
					checked="checked"
				</c:if>
			> Không
		</td></tr>
		<tr><td>Cảnh báo</td><td>
			<input type="radio" name="user.alarm" value="1"
				<c:if test="${user.alarm == '1' }">  
					checked="checked"
				</c:if> 
			> Có
			<input type="radio" name="user.alarm" value="0"
				<c:if test="${user.alarm == '0' }">  
					checked="checked"
				</c:if> 			
			> Không			
		</td></tr>
		<tr><td>Group<span class="error">&nbsp;*</span></td>
			<td style="text-align: left;">
				<select style="margin-left: 32px; width: 148px;" id="groupCombo" name="user.groupId" onfocus="loadGroups();">
					<option value="0">Hãy chọn group</option>
					<option value="${user.groupId }" selected="selected">${user.groupName }</option>
				</select>
			</td>
		</tr>				
	</tbody>
</table>
<div style="margin-top: 30px;">
	<button type="button" onclick="history.back();">Hủy bỏ</button>
	<button type="button" onclick="submitEditUserForm();">Đồng ý</button>
</div>
</s:form>
</div>
</center>